<template>
    <div>
        <Modal v-model="showData" title="显示预约" :mask-closable="false">
            <Button type="primary" size="large" @click="exportData(1)" style="margin-bottom:20px;margin-right:20px;">
                <Icon type="ios-download-outline"></Icon> 导出</Button>
            <Button type="primary" size="large" @click="remind()" style="margin-bottom:20px;">
                <Icon type="ios-alarm-outline"></Icon> 提醒</Button>
            <Table border stripe :columns="columns3" :data="data2" ref="table2"></Table>
        </Modal>
        <Modal v-model="showDataModalFlag" title="修改行程" @on-ok="handleSubmit2('formValidate2')" :mask-closable="false">
            <Form :label-width="100" ref="formValidate2" :rules="ruleValidate2" :model="showDataModalObject">
                <FormItem label="城市" prop="code">
                    <Input placeholder="输入城市" class="input-select-class" v-model="showDataModalObject.city"></Input>
                </FormItem>
                <FormItem label="学校" prop="name">
                    <Input placeholder="输入学校" class="input-select-class" v-model="showDataModalObject.school"></Input>
                </FormItem>
                <FormItem label="时间" prop="year">
                    <DatePicker format='yyyy-MM-dd HH:mm' class="time-picker" type="datetime" placeholder="选择宣讲时间" style="width:100%;" v-model="showDataModalObject.time"></DatePicker>
                </FormItem>
                <FormItem label="地点" prop="operate_name2">
                    <Input placeholder="地点" class="input-select-class" v-model="showDataModalObject.position"></Input>
                </FormItem>
                <FormItem label="开启导航">
                    <Select style="width:100%" v-model="showDataModalObject.is_nav">
                        <Option v-for="target in ifopentarget" :value="target.value" :key="target.value">{{ target.label }}</Option>
                    </Select>
                </FormItem>
                </FormItem>
                <FormItem label="开启提醒" v-if="ptype==2">
                    <Select style="width:100%" v-model="showDataModalObject.is_remind">
                        <Option value="0">0</Option>
                    </Select>
                </FormItem>
                <FormItem label="开启提醒" v-if="ptype>2">
                    <Select style="width:100%" v-model="showDataModalObject.is_remind">
                        <Option v-for="remind in ifopenremind" :value="remind.value" :key="remind.value">{{ remind.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
        <Row style="margin-top:20px">
            <Col span="19">
            <span class="alltitle"><router-link to="项目列表"> 项目列表</router-link>>宣讲行程</span>
            </Col>
            <!--   <Col span="2">
      <span class="innertitle">下载批量表格</span>
    </Col> -->
            <!--  <Col span="2" offset="1">
       <span class="innertitle">批量导入</span>
     </Col> -->
        </Row>
        <Row class="fazhanlicheng" style="margin-top:20px;height:40px;padding-left:20px">
            <span class="title">宣讲行程</span>
        </Row>
        <Row class="fazhanlicheng" style="heigh:60px;">
            <Col span="4" class="inner-info2">城市</Col>
            <Col span="5" class="inner-info2">学校</Col>
            <Col span="4" class="inner-info2">时间</Col>
            <Col span="5" class="inner-info2">地点</Col>
            <Col span="3" class="inner-info2">开启导航</Col>
            <Col span="3" class="inner-info2">开启提醒</Col>
        </Row>
        <Row class="fazhanlicheng" style="heigh:60px;">
            <Col span="3" class="inner-info2">
            <Input placeholder="输入城市" style="width: 100%;" v-model="city" />
            </Col>
            <Col span="4" class="inner-info2" offset="1">
            <Input placeholder="输入学校名称" style="width: 100%" v-model="school" />
            </Col>
            <Col span="3" class="inner-info2" offset="1">
            <DatePicker format='yyyy-MM-dd HH:mm' class="time-picker" type="datetime" placeholder="选择宣讲时间" style="width:100%;" v-model="speakTime"></DatePicker>
            </Col>
            <Col span="4" class="inner-info2" offset="1">
            <Input placeholder="输入地点" style="width: 100%" v-model="position" />
            </Col>
            <Col span="2" class="inner-info2" offset="1">
            <Select style="width:100%" v-model="openNav">
                <Option v-for="target in ifopentarget" :value="target.value" :key="target.value">{{ target.label }}</Option>
            </Select>
            </Col>
            <Col span="2" class="inner-info2" offset="1" v-if="ptype==2">
            <Select style="width:100%" v-model="openRemind">
                <Option value="0">0</Option>
            </Select>
            </Col>
            <Col span="2" class="inner-info2" offset="1" v-if="ptype>2">
            <Select style="width:100%" v-model="openRemind">
                <Option v-for="remind in ifopenremind" :value="remind.value" :key="remind.value">{{ remind.label }}</Option>
            </Select>
            </Col>
        </Row>
        <Row class="add-new-progress" style="heigh:60px;background:#f5f7f9">
            <Button type="primary" style="width:100px" @click="handleClick">确认提交</Button>
            <span class="inline-title" style="padding-left: 20px;display:inline-block" @click="handleClick2">批量导入行程</span>
            <span class="inline-title" style="padding-left: 20px;display:inline-block"> <a href="../51admin/example3.xlsx">下载行程表格模板</a></span>
            <form id="activeForm" enctype="multipart/form-data">
                <input type="file" id="fileExport" ref="inputer" style="display:none" @change="importExcel($event)" name="file[]">
            </form>
        </Row>
        <div class="content-div" style="margin-top:10px">
            <Table border stripe :columns="columns2" :data="data" ref="table"></Table>
        </div>
    </div>
</template>
<script>
import {
    formatDate
} from '@/js/date.js'
export default {
    data() {
            return {
                showtable: {},
                showData: false,
                formValidate2: {

                },
                ruleValidate2: {

                },
                showDataModalObject: {},
                showDataModalFlag: false,
                city: '',
                school: '',
                speakTime: '',
                openNav: '',
                openRemind: '0',
                position: '',
                ifopentarget: [{
                    label: "1",
                    value: "1"
                }, {
                    label: "0",
                    value: "0"
                }],
                ifopenremind: [{
                    label: "1",
                    value: "1"
                }, {
                    label: "0",
                    value: "0"
                }],
                data: [],
                data2: [],
                columns2: [{
                    title: "序号",
                    key: "id",
                    width: 99,

                }, {
                    title: "城市",
                    key: "city",

                }, {
                    title: "学校",
                    key: "school",

                }, {
                    title: "时间",
                    key: "time",
                    sortType: "asc",
                    render: (h, params) => {
                        return h('div',
                            formatDate(new Date(params.row.time), 'yyyy-MM-dd hh:mm')

                        )
                    }

                }, {
                    title: "地点",
                    key: "position",
                    width: 150,

                }, {
                    title: "开启导航",
                    key: "is_nav",
                    width: 150,

                }, {
                    title: "开启提醒",
                    key: "is_remind",
                    width: 150,

                }, {
                    title: "预约",
                    key: "action",
                    width: 99,

                    render: (h, params) => {
                        return h("div", [
                            h(
                                "span", {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer"
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index);
                                        }
                                    }
                                },
                                "查看"
                            ),

                        ]);
                    }
                }, {
                    title: "操作",
                    key: "action",
                    width: 99,

                    render: (h, params) => {
                        return h("div", [
                            h(
                                "span", {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer"
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index);
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            h(
                                "span", {
                                    style: {
                                        textDecoration: "underline",
                                        color: "#4b80fd",
                                        cursor: "pointer",
                                        'margin-left': "5px",
                                    },
                                    on: {
                                        click: () => {
                                            this.removeData(params.index);
                                        }
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }],
                columns3: [{
                    title: "序号",
                    key: "id",
                    width: 99,

                }, {
                    title: "姓名",
                    key: "cname",

                }, {
                    title: "手机",
                    key: "phone",
                    width: 150,

                }, ],

            }
        },
        methods: {
            remind() {
                var self = this
                self.$Modal.confirm({
                    title: '自动发送提醒时间为活动开始前4小时，需要手动发送吗？',
                    content: '',
                    onOk: () => {

                        $.ajax({
                            url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachsendremind&id=" + self.data2[0].preach_id,

                            type: "POST",
                            dataType: "json",
                            success: function(data) {

                                console.log(data);
                                if (data.code == 1) {
                                    self.$Message.success("消息发送成功");
                                }else{
                                    self.$Message.error("此行程已经提醒过了");
                                }

                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消发送');
                    }
                });


            },
            exportData(type) {
                this.$refs.table2.exportCsv({
                    filename: '预约数据'
                });
            },
            removeData(index) {
                var self = this
                self.$Modal.confirm({
                    title: '确认删除？',
                    content: '',
                    onOk: () => {

                        var self = this;
                        self.$api.post('/api/v1/edit', self.data[index], function(result) {
                            self.data.splice(index, 1)
                            self.$Message.info(result.message)
                        })


                        $.ajax({
                            url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachdel&id=" + self.data[index].id,

                            type: "POST",
                            dataType: "json",
                            success: function(data) {

                                console.log(data);

                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });

            },
            Format(datetime, fmt) {
                if (parseInt(datetime) == datetime) {
                    if (datetime.length == 10) {
                        datetime = parseInt(datetime) * 1000;
                    } else if (datetime.length == 13) {
                        datetime = parseInt(datetime);
                    }
                }
                datetime = new Date(datetime);
                var o = {
                    "M+": datetime.getMonth() + 1, //月份
                    "d+": datetime.getDate(), //日
                    "h+": datetime.getHours(), //小时
                    "m+": datetime.getMinutes(), //分
                    "s+": datetime.getSeconds(), //秒
                    "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
                    "S": datetime.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            },

            show(index) {
                var self = this
                self.showData = true;

                self.showtable = self.data[index];

                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachappointmentlist&id=" + self.showtable.id,

                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        if (data.data != null) {
                            self.data2 = data.data
                            console.log(self.data2);
                        } else {
                            self.$Message.error("没有预约");
                            self.data2 = []

                        }
                    }
                });
            },


            edit(index) {
                this.showDataModalFlag = true;

                this.showDataModalObject = this.data[index];
                //this.showDataModalObject.time = this.Format(this.showDataModalObject.time, "yyyy-MM-dd hh:mm:ss")

                console.log(this.showDataModalObject.time)
            },

            handleClick() {
                var poid = localStorage.pid;
                var self = this
                    //console.log(self.time(this.speakTime));

                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachcreate&id=" + poid,
                    data: {
                        city: self.city,
                        school: self.school,
                        time: formatDate(new Date(self.speakTime), 'yyyy-MM-dd hh:mm'),
                        position: self.position,
                        is_nav: self.openNav,
                        is_remind: self.openRemind
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        if (data.code == 1) {
                            console.log(data);
                            self.$Message.success("添加成功！");
                            self.update()
                        } else {
                            self.$Message.error("添加失败！");
                        }
                    }
                });
            },
            handleSubmit2() {
                var self = this
                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachedit&id=" + self.showDataModalObject.id,
                    data: {
                        city: self.showDataModalObject.city,
                        school: self.showDataModalObject.school,
                        time: formatDate(new Date(self.showDataModalObject.time), 'yyyy-MM-dd hh:mm'),
                        position: self.showDataModalObject.position,
                        is_nav: self.showDataModalObject.is_nav,
                        is_remind: self.showDataModalObject.is_remind
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        self.$Message.success("修改成功！");
                        self.update()
                    }
                });
            },
            update() {
                var self = this;
                var poid = localStorage.pid;
                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachlist&id=" + poid,
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        self.data = data.data;
                        if (self.data) {                            
                            for (var i = 0; i < data.data.length; i++) {
                                self.data[i].time = self.Format(self.data[i].time, "yyyy-MM-dd hh:mm:ss")

                            }
                        }

                    }
                });
            },
            handleClick2() {
                $("#fileExport").click();
            },
            importExcel() {
                var poid = localStorage.pid;
                var self = this;
                var formData = new FormData($("#activeForm")[0]);

                $.ajax({
                    url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachbatch&id=" + poid,
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: "POST",
                    dataType: "json",

                    success: function(data) {

                        console.log(data);
                        var iRepeat = data.iRepeat
                        var iSuccess = data.iSuccess

                        if (data.code == 1) {

                            self.$Message.success('导入完成' + iSuccess + '条,重复的有' + iRepeat + '条');
                            self.update()

                        } else {

                            self.$Message.error('导入失败');

                        }

                    }
                });

            },

        },
        computed: {
            ptype() {
                return localStorage.ptype
            }
            
        },
        created() {

            var self = this;
            var poid = localStorage.pid;


            $.ajax({
                url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=preachlist&id=" + poid,
                type: "POST",
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    self.data = data.data;
                    if (self.data) {                        
                        for (var i = 0; i < data.data.length; i++) {
                            self.data[i].time = self.Format(self.data[i].time, "yyyy-MM-dd hh:mm:ss")

                        }
                    }

                }
            });
        }
}
</script>
<style scoped>
.inline-title {
    line-height: 38px;
    text-decoration: underline;
    color: #4b80fd;
    font-family: MicrosoftYaHei;
    font-size: 14px;
}
.innertitle {
    line-height: 30px;
    font-size: 14px;
    text-decoration: underline;
    color: #4B80FD;
    font-family: MicrosoftYaHei;
    cursor: pointer;
}

.fazhanlicheng {
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 1px;
    padding: 0px;
    padding-left: 20px;
}

.title {
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 40px;
    font-weight: bold;
}

.inner-info2 {
    float: left;
    line-height: 60px;
    font-size: 14px;
    color: #333;
    font-family: MicrosoftYaHei;
}

.time-picker {
    margin-top: 15px;
}

.add-new-progress {
    box-sizing: border-box;
    background: #fff;
    padding: 0;
    text-align: center;
    color: #4B80FD;
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    line-height: 60px;
    cursor: pointer;
}

.add-new-progress {
    box-sizing: border-box;
    background: #fff;
    padding: 0;
    text-align: center;
    color: #4B80FD;
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    line-height: 60px;
    cursor: pointer;
}
</style>
